<template>
	<div class="strategyImgContent">
		<div class="strategyMenus">
			<div class="strategyMenusBut">
				<wj-Button type="save" @click="handleAdd">添加</wj-Button>
				<wj-Button type="save" @click="handleAllDelete">批量删除</wj-Button>
				<wj-Button type="save" @click="handleAll_issueflow">批量下发</wj-Button>
			</div>
			<div class="strategyMenusSearch">
				<el-input
					placeholder="请输关键字检索"
					type="text"
					v-model="searchValue"
					@keyup.enter.native="
						(e) => {
							e.target.blur();
						}
					"
					@blur="searchEvent"
				></el-input>
			</div>
		</div>
		<div class="strategyList">
			<el-table
				:data="tableData"
				style="width: 100%"
				:default-sort="{ prop: 'num', order: 'descending' }"
				@selection-change="handleSelectionChange"
				:row-class-name="tableRowClassName"
				:cell-class-name="tableCellClassName"
			>
				<el-table-column type="selection" width="55"> </el-table-column>
				<el-table-column prop="num" label="下发状态" width="180">
					<template slot-scope="scope">
						<span v-if="scope.row.num > 0">已下发</span>
						<span v-if="scope.row.num <= 0">未下发</span>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="策略名称" sortable width="180"> </el-table-column>
				<el-table-column prop="dangerImageCollect" label="策略内容" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="terminalTotal" label="准入统计" width="180">
					<template slot-scope="scope">
						<el-link type="primary" @click="handleSkip(scope.$index, scope.row)">{{ scope.row.terminalTotal }}</el-link>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="240">
					<template slot-scope="scope">
						<el-link type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
						<el-link type="primary" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
						<el-link type="primary" v-if="scope.row.num > 0" @click="handleAnew(scope.$index, scope.row)">重新下发</el-link>
						<el-link type="primary" v-if="scope.row.num <= 0" @click="handleIssue(scope.$index, scope.row)">下发策略</el-link>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="strategyPage">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[11]"
				:page-size="pageSize"
				layout="total, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
		</div>
		<!-- 自定义alertBox弹框——编辑 -->
		<AlertBox :alertBoxVisible="alertBoxFormVisible">
			<div class="contentBox contentBoxDetailsStrategy_class">
				<div class="contentBox_header">
					<p>策略编辑</p>
					<i class="wj-icon-guanbi" @click="alertBoxFormclose"></i>
				</div>
				<div class="contentBox_body">
					<!-- <div class="infoRow_form">
						<span>当前状态</span>
						<span class="form-span">{{ startegyEdit.state }}</span>
					</div> -->
					<div class="infoRow_form">
						<span>策略名称<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="startegyEdit.name" placeholder="请输入内容" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>白名单图组<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select v-model="startegyEdit.collectIdArr" collapse-tags multiple placeholder="请选择白名单图片组" @change="handleSelect">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" v-checksubmit="{ submitEvent: handleEditConfirm, cls: 'contentBoxDetailsStrategy_class' }">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
		<!-- 自定义alertBox弹框——新增 -->
		<AlertBox :alertBoxVisible="alertBoxAddVisible">
			<div class="contentBox contentBoxAddStrategy_class">
				<div class="contentBox_header">
					<p>新增策略</p>
					<i class="wj-icon-guanbi" @click="alertBoxAddclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="infoRow_form">
						<span>策略名称<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="startegyAdd.name" placeholder="请输入策略名称" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>白名单图组<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select v-model="startegyAdd.collectIdArr" collapse-tags multiple placeholder="请选择白名单图片组" @change="handleSelect">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" v-checksubmit="{ submitEvent: handleAddConfirm, cls: 'contentBoxAddStrategy_class' }">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
	</div>
</template>
<script>
import {
	/* 修改 */
	strategy_imgDepot_all,
	strategy_imgGroup,
	strategy_imgDepot_add,
	strategy_imgDepot_delete,
	strategy_imgDepot_all_delete,
	strategy_imgDepot_edit,
} from "@/utils/request/api";
export default {
	name: "StrategyImg",
	data() {
		return {
			// 搜索
			searchValue: "",
			// 分页当前页码
			currentPage: 1,
			// 总页码
			total: 0,
			// 每页条数
			pageSize: 10,
			// 分页初始化页码
			pageNum: 1,
			// 表格数据
			tableData: [],
			multipleSelection: [],
			// 自定义弹窗控制——编辑
			alertBoxFormVisible: false,
			// 自定义弹窗控制——新增
			alertBoxAddVisible: false,
			// 编辑数据
			startegyEdit: {
				id: "",
				name: "",
				collectIdArr: [],
			},
			// 新增数据
			startegyAdd: {
				name: "",
				collectIdArr: [],
			},
			// 下拉数据
			options: [],
		};
	},
	created() {},
	mounted() {
		this.getAllKeywordGroup();
		this.getAllStrategy(this.pageNum, this.pageSize);
	},
	methods: {
		// 搜索
		searchEvent() {
			console.log(this.searchValue);
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			this.getSearchStrategy(this.pageNum, this.pageSize, this.searchValue);
		},
		// 分页组件事件
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			if (this.searchValue != "") {
				this.getSearchStrategy(val, this.pageSize, this.searchValue);
			} else {
				this.getAllStrategy(val, this.pageSize);
			}
		},
		// select选项
		handleSelect() {
			console.log(this.startegyAdd.collectIdArr);
			console.log(this.startegyAdd.collectIdArr.toString());
		},
		// 新增
		handleAdd() {
			this.alertBoxAddVisible = true;
		},
		// 初始化新增数据
		initStrategyAdd() {
			this.startegyAdd = {
				name: "",
				collectIdArr: [],
			};
		},
		// 新增——确定
		handleAddConfirm() {
			if (this.startegyAdd.collectIdArr.length <= 0) {
				this.$msg.warning("请选择白名单图片组！");
			} else {
				strategy_imgDepot_add({
					name: this.startegyAdd.name,
					content: this.startegyAdd.collectIdArr.toString(),
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("策略新增成功！");
						this.alertBoxAddVisible = false;
						this.initStrategyAdd();
						this.getAllStrategy(this.pageNum, this.pageSize);
					} else {
						this.$msg.error("策略新增失败！");
					}
				});
			}
		},
		// 表格选中
		handleSelectionChange(val) {
			this.multipleSelection = val;
			console.log(this.multipleSelection);
		},
		// 编辑
		handleEdit(index, row) {
			console.log(index, row);
			this.alertBoxFormVisible = true;
			this.startegyEdit.id = row.id;
			this.startegyEdit.name = row.name;
			this.startegyEdit.collectIdArr = row.content ? row.content.split(",").map(Number) : [];
		},
		// 编辑——确定
		handleEditConfirm() {
			if (this.startegyEdit.collectIdArr.length <= 0 ) {
				this.$msg.warning("请选择白名单图片组！");
			} else {
				strategy_imgDepot_edit({
					id: this.startegyEdit.id,
					name: this.startegyEdit.name,
					content: this.startegyEdit.collectIdArr.toString(),
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("策略修改成功！");
						this.alertBoxFormVisible = false;
						this.getAllStrategy(this.pageNum, this.pageSize);
					} else {
						this.$msg.error("策略修改失败！");
					}
				});
			}
		},
		// 删除
		handleDelete(index, row) {
			console.log(index, row);
			strategy_imgDepot_delete({
				id: row.id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("策略删除成功！");
					this.getAllStrategy(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("策略删除失败！");
				}
			});
		},
		// 批量删除
		handleAllDelete() {
			console.log(this.multipleSelection);
			if (this.multipleSelection.length > 0) {
				var idList = [];
				this.multipleSelection.forEach((item) => {
					idList.push(item.id);
				});
				console.log(decodeURIComponent(idList));
				strategy_imgDepot_all_delete({
					idList: decodeURIComponent(idList),
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("策略批量删除成功！");
						this.getAllStrategy(this.pageNum, this.pageSize);
					} else {
						this.$msg.error("策略批量删除失败！");
					}
				});
			}
		},
		// 重新下发
		handleAnew(index, row) {
			console.log(index, row);
			this.$router.push(
				{ name: "IssueflowIndex", params: { type: 3, imageStrategyId: row.id } },
				(onComplete) => {
					console.log(onComplete);
				},
				(onabort) => {
					console.log(onabort);
				}
			);
		},
		// 下发策略
		handleIssue(index, row) {
			console.log(index, row);
			this.$router.push(
				{ name: "IssueflowIndex", params: { type: 3, imageStrategyId: row.id } },
				(onComplete) => {
					console.log(onComplete);
				},
				(onabort) => {
					console.log(onabort);
				}
			);
		},
		// 批量下发
		handleAll_issueflow() {
			console.log(this.multipleSelection);
			if (this.multipleSelection.length > 0) {
				var idList = [];
				this.multipleSelection.forEach((item) => {
					idList.push(item.id);
				});
				console.log(idList);
				this.$router.push(
					{ name: "IssueflowIndex", params: { type: 3, imageStrategyIdList: idList } },
					(onComplete) => {
						console.log(onComplete);
					},
					(onabort) => {
						console.log(onabort);
					}
				);
			}
		},
		// 跳转下发流程页面
		handleSkip(index, row) {
			console.log(index, row);
			this.$router.push(
				{ name: "IssueflowIndex", params: { type: 3, imageStrategyId: row.id } },
				(onComplete) => {
					console.log(onComplete);
				},
				(onabort) => {
					console.log(onabort);
				}
			);
		},
		// 未下发和已下发row——文字样式
		tableRowClassName({ row }) {
			// console.log(row);
			// console.log(rowIndex);
			if (row.num <= 0) {
				return "forbidden-row tableRowClassName";
			}
			return "tableRowClassName";
		},
		// 已启用和已禁用cell——文字样式
		tableCellClassName({ row, columnIndex }) {
			// console.log(row);
			// console.log(rowIndex);
			// console.log(column);
			// console.log(columnIndex);
			if (row.status == 1 && columnIndex == 4) {
				return "forbidden-cell-read";
			}
			if (row.status == 0 && columnIndex == 4) {
				return "forbidden-cell-unread";
			}
			return "";
		},
		// alertBox——编辑 关闭
		alertBoxFormclose() {
			this.alertBoxFormVisible = false;
		},
		// alertBox——新增 关闭
		alertBoxAddclose() {
			this.alertBoxAddVisible = false;
			this.initStrategyAdd();
		},
		// 获取全部策略
		getAllStrategy(page, size) {
			strategy_imgDepot_all({
				page: page,
				size: size,
			}).then((res) => {
				console.log(res);
				this.tableData = res.data.result;
				this.total = res.data.total;
			});
		},
		// 搜索策略
		getSearchStrategy(page, size, value) {
			strategy_imgDepot_all({
				page: page,
				size: size,
				keyword: value,
			}).then((res) => {
				console.log(res);
				this.tableData = res.data.result;
				this.total = res.data.total;
			});
		},
		// 查询所有白名单词图片组
		getAllKeywordGroup() {
			strategy_imgGroup().then((res) => {
				console.log(res);
				if (res.code == 200) {
					res.data.result.forEach((item) => {
						this.options.push({
							label: item.collectName,
							value: item.id,
						});
					});
				} else {
					this.$msg.error("白名单图库分组获取失败！");
				}
			});
		},
	},
};
</script>
<style lang="less" scoped>
.strategyImgContent {
	width: 100%;
	height: 100%;
	padding: 12px 20px;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.strategyMenus {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.strategyMenusBut {
			width: 85%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			[class*="wj-button-"] {
				font-size: 14px;
				padding: 8px 18px;
				margin-right: 12px;
			}
		}
		.strategyMenusSearch {
			width: 15%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			/deep/ .el-input {
				font-size: 16px;
			}
		}
	}
	.strategyList {
		width: 100%;
		height: calc(100% - 48px - 48px);
		padding: 28px 0;
		box-sizing: border-box;

		/deep/ .el-table {
			border-left: 1px solid #ebeef5;
			border-right: 1px solid #ebeef5;
			border-top: 1px solid #ebeef5;
		}
		/deep/ .el-link {
			margin: 0 12px 0 0;
		}
		/deep/ .el-table .forbidden-row {
			color: #adaaad;
		}
		/deep/ .el-table .forbidden-cell-read .cell {
			color: #f56c6c;
		}
		/deep/ .el-table .forbidden-cell-unread .cell {
			color: #67c23a;
		}
	}
	.strategyPage {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>
